<template>
    <div class="game-box" ref="boxRef">
       <div class="game-desck" ref="desckRef">
           <image class="game-desck-bg" src="src/assets/image/bg-game-desck-landscape.png"/>
           <User
               v-for="(item,index) in userList"
               :key="item.id"
               :posX="userPosList[index].x" 
               :posY="userPosList[index].y" 
               :username="item.username"
               :isBlind="item.isBlind"
               :index="index"
               :isRight="userPosList[index].isRight"
           />    
           <div class="test-box" :style="{
               left:desckCenter.x+'px',
               top:desckCenter.y+'px'
           }">
               <!-- T -->
           </div> 
       </div>
       <div class="game-op">
           <Opreation/>
       </div>
       <!-- <div class="box">
               <div v-for="(iconItem,index) in pokeIconList" class="list">
                   <Card v-for="(numberItem) in pokeNumberList" :code="numberItem" :icon="iconItem"></Card>
               </div>
       </div> -->
    </div>
</template>

<script setup>

import Card from '@/components/Card.vue'
import {pokeIconList,pokeNumberList} from '@/constants/enum.js'
import { useScreenOrientation,useElementBounding} from '@vueuse/core'
import { useFullscreen } from '@vueuse/core'
import {computed, nextTick, onMounted, ref} from 'vue'
import User from '@/components/User.vue';
import Opreation from '@/components/Opreation.vue';


const boxRef = ref(null);
const desckRef = ref(null);
const { x, y, top, right, bottom, left, width, height }= useElementBounding(desckRef)
const userList = ref([
   {
       id:'1',
       username:'John',
       isBlind:true,
   },
   {
       id:'2',
       username:'John',
       isBlind:true,
   },
   {
       id:'3',
       username:'John',
       isBlind:true,
   },
   {
       id:'4',
       username:'John',
       isBlind:true,
   },
   {
       id:'5',
       username:'John',
       isBlind:true,
   },
   {
       id:'6',
       username:'John',
       isBlind:true,
   },
   {
       id:'7',
       username:'John',
       isBlind:true,
   },
   {
       id:'8',
       username:'John',
       isBlind:true,
   },
]);
const desckGap = 0.19;
const desckCenter = computed(()=>{
   const x = (width.value/2);
   const y = (height.value /2);
   return {
       x,
       y
   }
})
const userPosList = computed(()=>{
   const posList = [];
   const playerNumber = userList.value.length;
   for (let i = 0; i < playerNumber ; i++) {
       const angle = i * (2 * Math.PI / playerNumber);
       const x = desckCenter.value.x + width.value*(1-desckGap) / 2 * Math.cos(angle); // 椭圆中心在(150,100)
       const y = desckCenter.value.y + height.value / 2 * Math.sin(angle);
       const isRight = x > desckCenter.value.x;
       posList.push({ x, y,isRight });
   }
   return posList;
})
</script>

<style scoped lang="less">

.game-box{
   width: 100%;
   height: 100%;
   background: url('@/assets/image/bg-game.jpg') no-repeat  center center;
   background-size: cover;
   position: relative;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
   .game-desck{
       position: absolute;
       background: url('@/assets/image/bg-game-desck-landscape.png') no-repeat;
       background-size:contain;
       width: 5.1rem;
       height: 2.05rem;
       left:.49rem;
       top:.74rem;
       .game-desck-bg{
         width: 100%;
         height: 100%;
         display: block;
       }
       /* 当屏幕高度大于宽度时，应用竖屏样式 */
       @media screen and (orientation: portrait) {
           background-image: url('@/assets/image/bg-game-desck.png');
           background-position: center;
           height: 9rem;
           width: 90%;
           top: 2%;
           left: 50%;
           transform: translateX(-50%);
       }
       .test-box{
           position: absolute;
           width: .08rem;
           height: .08rem;
           background-color: blue;
           border-radius: 50%;
       }
   }
   .game-op{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
   }
   // .box{
   //     display: flex;
   //     flex-direction: column;
   //     gap: .08rem;
   //     position: absolute;
   //     top: 0.1rem;
   //     .list{
   //         display: flex;
   //         gap: .08rem;
   //     }
   // }
}
</style>
